<template>
	<view class="HeadNavigation" :style="{backgroundColor:bgColor} ">
		<view class="statusBar" :style="{height:(statusBarHeight) + 'px'}"></view>

		<view class="headNav">
			<view class="left">
				<!-- #ifdef APP -->
				<text class="iconfont icon-a-mingchengReturn textIcon" :style="titleColor.length>0?{color:titleColor}:''" @click="goBack"></text>
				<!-- #endif -->
				
				<!-- #ifdef MP-WEIXIN -->
				<view class="capsule" v-if="detail">
					<text class="iconfont icon-a-mingchengReturn textIcon" @click="goBack"></text>
					<view class="statusLine">|</view>
					<text class="iconfont icon-a-mingchengmore" @click="details(isDefinitionDetail)" v-if="detail"></text>
				</view>
				<view  v-else="detail" class="wxLeft">
					<text class="iconfont icon-a-mingchengReturn textIcon" @click="goBack"></text>
					<!-- 红外宝内部删除事件 -->
					<view v-if="headDel" class="statusLine">|</view>
					<text v-if="headDel" class="delText" @click="handleHeadDel">删除</text>
				</view>
				
				<!-- #endif -->

			</view>
			<view class="title" :style="titleColor.length>0?{color:titleColor}:''">
				{{title}}
			</view>
			<view class="right">
				<!-- #ifdef APP -->
				<text class="iconfont icon-a-mingchengmore" @click="details(isDefinitionDetail)" v-if="detail"></text>
				<text v-if="headDel" class="delText" @click="handleHeadDel">删除</text>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<text class="iconfont icon-a-mingchengmore" @click="details(isDefinitionDetail)" v-if="detail"></text>
				<!-- #endif -->
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "HeadNavigation",
		props: {
			title: {
				type: String,
				default: '标题',
			},
			detail: {
				type: Boolean,
				default: false
			},
			isDefinitionDetail: {
				type: Boolean,
				default: false
			},
			goBackNum: {
				type: String,
				default: '1',
			},
			bgColor: {
				type: String,
				default: 'var(--backSubject)',
			},
			titleColor: {
				type: String,
				default: '',
			},
			headDel:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				statusBarHeight: '',
			};
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			handleHeadDel(){
				this.$emit('handleHeadDel')
			},
			details(isDefinitionDetail) {
				if (isDefinitionDetail) {
					this.$emit('details')
				} else {
					uni.navigateTo({
						url: '/pagesDevice/Details/Details'
					})
				}
			},
			goBack() {
				let goBackNum = parseInt(this.goBackNum)
				uni.navigateBack({
					delta: goBackNum
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.HeadNavigation {
		// background-color: var(--backSubject);

		.headNav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 44px;
			box-sizing: border-box;
			padding: 0 16px;
			.delText{
				color: $uni-color-red;
			}
			.capsule{
				width: 87px;
				height: 32px;
				border-radius: 25px;
				border: 1px solid var(--borderColor);
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				.statusLine{
					color: var(--borderColor);
				}
				
			}
		}

		.textIcon {
			color: var(--subtopicTextColor);
			// margin-right: 8px;
		}



		.left {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 87px;

			text {
				color: var(--subtopicTextColor);
			}
			.wxLeft{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 87px;
				
				.statusLine{
					color: var(--borderColor);
				}
			}
			
		}

		.title {
			width: 133px;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 18px;
			line-height: 27px;
			color: var(--subjectTextColor);
		}

		.right {
			width: 87px;
			float: right;
			
			text {
				color: var(--subtopicTextColor);
				text-align: right;
				float: right;
			}
		}
	}
</style>
